<!-- 主页主模块-左 -->
<template>
  <div class="index-left">
    <!-- left -->
    <!-- 左上 -->
    <div class="box-container index-device">
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <!-- 设备类型选择 暂时弃用 -->
        <!-- <div class="select-type">
          <ul>
            <li v-for="(item,i) in deviceType" :key="i" :class="{'index-device-active': i==radio}">
              <span>{{item}}</span>
            </li>
          </ul>
        </div> -->
        <!-- <PublicEcharts
          :title="'设备概况'"
          :option="this.indexDeviceData"
          :id="'indexDeviceData'"
          :method="this.chartDeviceClick"
          ref="indexDeviceData"
        ></PublicEcharts> -->
        <Chart1></Chart1>
      </dv-border-box-10>
    </div>
    <!-- 左中 -->
    <div class="box-container">
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <dv-border-box-8 :dur="10" :color="['rgba(0,0,0,0)']">
          <Chart2></Chart2>
          <!-- <PublicEcharts
            :title="'单位概况'"
            :option="this.indexUnitData"
            :id="'indexUnitData'"
            :method="this.handleUnitClick"
            ref="indexUnitData"
          ></PublicEcharts> -->
        </dv-border-box-8>
      </dv-border-box-10>
    </div>
    <!-- 左下 -->
    <div class="box-container">
      <dv-border-box-10 :color="[$config.datavBorderColor]">
        <Chart3></Chart3>
        <!-- <PublicEcharts
          :option="this.indexPersonData"
          :title="'人员概况'"
          :id="'indexPersonData'"
          :method="this.handlePersonClick"
          ref="indexPersonData"
        ></PublicEcharts> -->
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import PublicEcharts from "../../components/charts/PublicEcharts";
import $ from "jquery";
// import { getDeviceData } from "../../assets/data/deviceData" // 设备本地数据引入
import {getDeviceOption,getUnitOption,getPersonOption} from "../../utils/chartOption/indexChartOption"
import Chart1 from "../../components/chart/Chart1"
import Chart2 from "../../components/chart/Chart2"
import Chart3 from "../../components/chart/Chart3"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {PublicEcharts,Chart1,Chart2,Chart3},
  data() {
    //这里存放数据
    return {
      // deviceType: getDeviceData().type, // 暂时弃用
      radio: 0, // 左上种类选择
      // indexDeviceData: getDeviceOption(),
      // 单位概况图表数据 
      // 地区人员图表数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      // console.log('index-left');
      this.$store.commit("setListTypeIndex", 0)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      // this.selectDeviceType()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.index-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .box-container {
    width: 96%;
    flex: 1;
    padding: 2%;
    overflow: hidden;
    cursor: pointer;
    .todo1 {
      width: 60%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .box-container.index-device {
    position: relative;
    // .select-type {
    //   width: 100%;
    //   height: 10%;
    //   z-index: 9999;
    //   background-color: rgba(0, 0, 0, 0.1);
    //   position: absolute;
    //   left: 0;
    //   top: 15%;
    //   ul {
    //     width: 100%;
    //     height: 100%;
    //     display: flex;
    //     li {
    //       flex: 1;
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;
    //       border-top: 1px dashed #0050a5;
    //       border-bottom: 1px dashed #0050a5;
    //       span {
    //         color: @FontColor;
    //       }
    //     }
    //     li:hover {
    //       background-color: rgba(255, 255, 255, 0.3);
    //     }
    //     .index-device-active {
    //       background-color: rgba(255, 255, 255, 0.3);
    //     }
    //   }
    // }
  }
}
</style>